<!--
 *@Author: ʟɪ ᴢʜɪ ᴛᴏɴɢ
 *@Date: 2022-10-17 10:47:48
-->
<template>
  <Resize>
    <div class="container">
      <screenHeader></screenHeader>
      <div style="height:90%">
        <div class="left_container content_container">
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">单位工程总报建占比</div>
            <liquidFill></liquidFill>
          </dv-border-box-1>
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">项目总报建审批数量</div>
            <Histogram></Histogram>
          </dv-border-box-1>
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">项目总工程提交申请次数</div>
            <dynamicOrder></dynamicOrder>
          </dv-border-box-1>
        </div>
        <div class="center_container content_container">
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <application></application>
          </dv-border-box-1>
          <dv-border-box-1 style="height:66%" backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">项目区域汇总</div>
            <mapCharts></mapCharts>
          </dv-border-box-1>
        </div>
        <div class="right_container content_container">
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">工程移交总数量</div>
            <funnel></funnel>
          </dv-border-box-1>
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">原生电子文件和扫描件占比</div>
            <pie></pie>
          </dv-border-box-1>
          <dv-border-box-1 backgroundColor="rgba(255,255,255,.05)">
            <div class="title-text">社会经济效益</div>
            <benefit></benefit>
          </dv-border-box-1>
        </div>
      </div>
    </div>
  </Resize>
</template>

<script>
import screenHeader from '@/views/screenHeader/index';
import Resize from '@/components/resize/resize';
import Histogram from './histogram.vue';
import dynamicOrder from './dynamicOrder.vue';
import funnel from './funnel.vue';
import pie from './pie.vue';
import liquidFill from './liquidfill.vue'
import mapCharts from './map.vue'
import application from './application.vue';
import benefit from './benefit.vue'
export default {
  name: 'home',
  components: {
    screenHeader,
    Resize,
    Histogram,
    dynamicOrder,
    funnel,
    pie,
    liquidFill,
    mapCharts,
    application,
    benefit
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {}
};
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/background.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}
.title-text {
  color: #fff;
  width: 100%;
  height: 5%;
  text-align: center;
  line-height: 3rem;
  font-weight: 600;
  font-size: 26px;
}

.content_container {
  width: 33.3333%;
  height: 100%;
  float: left;
  padding: 0 10px;
}

.dv-border-box-1 {
  width: 100%;
  height: 32.5%;
  margin-bottom: 10px;
}
</style>
